import { StyleSheet, PixelRatio } from 'react-native';
var Dimensions = require('Dimensions')
var ScreenWidth = Dimensions.get('window').width;
var ScreenHeight = Dimensions.get('window').height;
var Style = StyleSheet.create({

    Container:{
        width: ScreenWidth,
        height: ScreenHeight,
    },

    MainContainer:{
        width: ScreenWidth,
        height: ScreenHeight - 20,
    },

    InputModuleContainer:{
        width: ScreenWidth,
        height: ScreenHeight - 20,
        backgroundColor:'#6570e3',
    },

    detailContainer: {
        width:ScreenWidth,
        height:ScreenHeight - 50,
        flexDirection: 'column',
        flex: 1,
    },

    detailDisplayContainer: {
        flex: 6,
        backgroundColor:'#6570e3',
    },

    detailOverViewContainer: {
        flex: 1.8,
        backgroundColor:'#ffffff',
    },

    detailListContainer: {
        flex: 14,
        backgroundColor:'#ffffff',
    },

    detailAddBtnContainer: {
        flex: 2.5,
        backgroundColor:'#6570E3',
        justifyContent:'center',
        alignItems:'center',
    },

    addIcon:{
        width:20,
        height:20,
    },
    backIcon:{
        width:60,
        height:60,
    },
    detailDisplay:{
        flex:1,
        flexDirection:'column',
        alignItems: 'center',
        marginTop:15,
        marginBottom:15,
    },

    detailTitle:{
        fontSize:16,
        color:'#ffffff',
        textAlign:'center',
        flex:1,
    },

    detailNumber:{
        fontSize:40,
        color:'#ffffff',
        textAlign:'center',
        flex:2,
    },

    line:{
        width:280,
        height:1 / PixelRatio.get(),
        backgroundColor:'#d9e4ef',
        marginTop:5,
        alignItems:'center'
    },

    detailBudget:{
        fontSize:16,
        color:'#ffffff',
        textAlign:'center',
        marginTop:5,
        flex:1,
    },

    listView: {
        backgroundColor: '#ffffff',
        flex:1,
    },

    list: {
        justifyContent: 'flex-start',
        flexDirection: 'row',
        flexWrap: 'wrap'
    },

    item:{
        width:ScreenWidth,
        height: 70,
        flexDirection:'row',
        paddingLeft:15,
        paddingRight:15,
        alignItems:'center',
        backgroundColor:'#f3f8fd',
        marginBottom:15,
    },

    deleteItem:{
        alignItems: 'center',
		flex: 1,
        height:70,
		flexDirection: 'row',
		justifyContent: 'center',
		paddingLeft: 15,
        paddingRight:25,
        marginBottom:15,
    },

    deleteText:{
        flex: 1,
        textAlign:'right',
        fontSize:15,
        color:'#165098',
    },
    
    itemIcon:{
        width:40,
        height: 40,
    },

    itemText:{
        flex:1,
        fontSize:20,
        color:'#165098',
        textAlign:'right',
        fontWeight: 'bold',
    },

    itemTextPayment:{
        flex:1,
        fontSize:20,
        color:'#fc7d70',
        textAlign:'right',
    },

    itemType:{
        fontSize: 18,
        color:'#7A849E',
        textAlign:'center',
        marginLeft:15,
        fontWeight:'bold',
    },

    overViewDisplay:{
        flex:1,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
        paddingLeft:15,
        paddingRight:15,
    },

    overViewText1:{
        fontSize:18,
        color:'#7a849e',
        textAlign:'center',
        fontWeight:'bold',
    },

    overViewText2:{
        flex:1,
        textAlign:'right',
        color:'#7a849e',
    },

    chartContainer: {
        width:ScreenWidth,
        height:ScreenHeight - 50,
        flex: 1,
        flexDirection:'column',
        backgroundColor:'#ffffff'
    },

    chartList:{
        width:ScreenWidth,
        marginTop:10,
        flex:1,
        backgroundColor:'#334455',
    },

    chartBlock: {
        width:ScreenWidth - 40,
        height: 100,
        flexDirection:'row',
        marginLeft:20,
        marginRight:20,
        borderWidth: 1,
        borderColor: '#334455'
    },
    
    chartItem: {
        flex:1,
        alignItems:'center',
        justifyContent:'center',
        flexDirection:'column',
        alignItems:'center',
    },

    chartTitle:{
        color:'#000000',
        fontWeight:'bold',
    },

    chartIcon:{
        width:25,
        height:25,
    },

    chartTime:{
        width:ScreenWidth - 40,
        height: 35,
        flexDirection:'row',
        marginTop:10,
        marginLeft:20,
        marginRight:20,
    },

    chartOverView:{
        color:'#000000',
        height:35,
        fontSize:15,
        textAlign:'center',
        fontWeight:'bold',
    },

    chartTimeText:{
        height:35,
        color:'#000000',
        fontSize:15,
        flex:1,
        textAlign:'right',
        marginRight:5,
        fontWeight:'bold',
    },

    expenseContainer: {
        width:ScreenWidth,
        height:ScreenHeight - 50,
        flexDirection: 'column',
    },

    expenseDisplayContainer: {
        flex: 3,
        backgroundColor: '#6570E3',
    },

    expenseTypeContainer: {
        flex: 6,
        backgroundColor: '#F8F8F8',
    },

    expenseInputContainer: {
        flex: 6,
        backgroundColor: '#F7F7F7',
    },

    expenseline:{
        width:ScreenWidth,
        height:1 / PixelRatio.get(),
        backgroundColor:'#d9e4ef',
        alignItems:'center'
    },

    displayContainer: {
        flex: 1,
        flexDirection: 'row',
        marginLeft: 20,
        marginRight: 20,
        alignItems: 'center',
    },

    displayIcon: {
        width: 50,
        height: 50,
    },

    displayText: {
        color:'#ffffff',
        fontSize:16,
        textAlign:'center',
        marginLeft: 0,
    },

    displayValue: {
        flex: 1,
        color:'#ffffff',
        fontSize:45,
        textAlign:'right',
    },

    typeItemContainer: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        paddingLeft: 20,
        paddingRight: 20,
    },

    typeItemImage: {
        width:35,
        height:35,
    },

    typeRow: {
        flex: 1,
        flexDirection: 'row',
        justifyContent:'space-around',
        
    },

    typeItemText: {
        color:'#666666',
        fontSize:10,
        textAlign:'center'
    },

    inputItemContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems:'center',
        paddingLeft: 20,
        paddingRight: 20,
    },

    inputItemImage: {
        width: 25,
        height:25,
    },

    inputItemText: {
        width: 25,
        height: 25,
        color:'#7a849e',
        fontSize:16,
        textAlign:'center',
    },
    
    rootContainer: {
        flex: 1
    },

    displayText: {
        color: '#FFFFFF',
        fontSize: 18,
        fontWeight: 'bold',
        textAlign: 'right',
        padding: 20
    },

    inputButton: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        borderWidth: 0.5,
        borderColor: '#91AA9D'
    },

    inputButtonHighlighted: {
        backgroundColor: '#193441'
    },

    inputButtonText: {
        fontSize: 22,
        fontWeight: 'bold',
        color: '#FFFFFF'
    },

    inputRow: {
        flex: 1,
        flexDirection: 'row'
    }
});

export default Style;
